<template>
  <div>
    <el-divider content-position="left">修改订单页</el-divider>
    <el-form ref="form"
    :rules="rules"
    :model="form" label-width="80px">
  <el-form-item label="商品名称" prop="oname">
    <el-input v-model="form.oname"></el-input>
  </el-form-item>
  <el-form-item label="商品属性" prop="properties">
    <el-input v-model="form.properties"  placeholder="请输入商品属性"></el-input>
  </el-form-item>
  <el-form-item label="商品价格" prop="price">
    <el-input v-model="form.price" placeholder="请输入商品价格"></el-input>
  </el-form-item>
  <el-form-item label="商品数量" prop="num">
    <el-input-number v-model="form.num" @change="handleChange" :min="1"></el-input-number>
  </el-form-item>
  <el-form-item>
    <template slot-scope="scope">
      <el-button type="primary" @click="onSubmit">修改订单</el-button>
      <el-button>取消</el-button>
    </template>
  </el-form-item>
</el-form>
  </div>
</template>

<script>
import httpApi from '@/http';
  export default {
    data() {
      return {
        form: {
          oname: '',
          properties: '',
          price: '',
          num: 1,
        },
        rules: {
        oname: [{required:true, message:'必填项', trigger: 'blur'}],
        properties: [{required:true, message:'必填项', trigger: 'blur'}],
        price: [{required:true, message:'必填项', trigger: 'change'}],
        num: [{required:true, message:'必填项', trigger: 'blur'}],
      }
      }
    },
    methods: {
      handleChange(value) {
        console.log(value);
        this.form.num=value
      },
       /** 提交表单 */
    onSubmit(){
      this.$refs['form'].validate(valid=>{
        if(valid){
          // 使用中文斜杠，将数组元素拼接成字符串，才可以发给服务端
        //  this.form.star_actor = this.form.star_actor.join('／')
         // this.form.type = this.form.type.join('／')
          console.log(this.form)
          // 发送请求，提交数据
          httpApi.MallApi.updateOrder(this.form).then(res=>{
            console.log('dgdfgdfgdfg');
            console.log('修改成功', res)
            if(res.data.code==200){
              this.$message({
                message:'恭喜您，订单更新成功', 
                type:'success'
              })
              // 跳转到花卉列表页：/home/flower-list
              this.$router.push('/home/mall-order-list')
            }
          })
        }
      })
    }},
       /** 生命周期，挂载完毕后执行 */
    mounted(){
      // 获取参数gid，加载当前选中的花卉的详细信息（发请求）
      let oid = this.$route.params.oid // 获取电影ID
      httpApi.MallApi.queryOrderByOid({oid}).then(res=>{
       console.log('通过oid查询花卉详情', res)
         this.form = res.data.data[0] 
        // this.form.typeId = this.form.typeId+''
      })
    }
  }
</script>

<style lang="scss" scoped>

</style>